import {Upload} from 'lucide-react';
import {Alert, AlertDescription, AlertTitle} from '@/components/ui/alert';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger
} from '@/components/ui/alert-dialog';
import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input';
import  {useState} from "react";

const FileUploadDialog = () => {
    const [file, setFile] = useState<File | null>(null);
    const [isOpen, setIsOpen] = useState(false);
    const [uploadStatus, setUploadStatus] = useState("");


    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            setFile(e.target?.files[0]);
        }
    };

    const handleUpload = () => {
        if (file) {
            // Here you would typically handle the file upload to your server
            console.log('Uploading file:', file.name);
            // Simulating upload process
            setUploadStatus('uploading');
            setTimeout(() => {
                setUploadStatus('success');
                setFile(null);
                // Close the dialog after a short delay
                setTimeout(() => {
                    setIsOpen(false);
                    setUploadStatus("");
                }, 1500);
            }, 2000);
        }
    };

    return (
        <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
            <AlertDialogTrigger asChild>
                <Button variant="default">Upload File</Button>
            </AlertDialogTrigger>
            <AlertDialogContent className="sm:max-w-[425px]">
                <AlertDialogHeader>
                    <AlertDialogTitle>Upload File</AlertDialogTitle>
                    <AlertDialogDescription>
                        Choose a file to upload from your device.
                    </AlertDialogDescription>
                </AlertDialogHeader>
                <div className="grid gap-4 py-4">
                    <Input
                        id="file"
                        type="file"
                        onChange={handleFileChange}
                        className="col-span-3"
                    />
                    {file && (
                        <p className="text-sm text-gray-500">
                            Selected file: {file.name}
                        </p>
                    )}
                    {uploadStatus === 'uploading' && (
                        <Alert>
                            <Upload className="h-4 w-4"/>
                            <AlertTitle>Uploading</AlertTitle>
                            <AlertDescription>
                                Your file is being uploaded...
                            </AlertDescription>
                        </Alert>
                    )}
                    {uploadStatus === 'success' && (
                        <Alert variant="default">
                            <AlertTitle>Success</AlertTitle>
                            <AlertDescription>
                                Your file has been uploaded successfully!
                            </AlertDescription>
                        </Alert>
                    )}
                </div>
                <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction onClick={handleUpload} disabled={!file || uploadStatus === 'uploading'}>
                        {uploadStatus === 'uploading' ? 'Uploading...' : 'Upload'}
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
};

export default FileUploadDialog;
